<template>
  <div class="vf-block">
    <header class="header">
      <span class="title">室内三维视频融合</span>
    </header>
    <div v-if="!destroy" id="cesiumContainer" />
    <div class="home_ui">
      <handel-block :visible-home="visibleHome" :visible-open-floor="visibleOpenFloor"
        :visible-close-floor="visibleCloseFloor" :visible-exit="visibleExit" :video-data="videoData"
        @flyToHome="flyToHome" @openFloors="openFloors" @closeFloors="closeFloors" @exitFloor="exitFloor" @show="show"
        @hide="hide" @flyToVModelById="flyToVModelById" @flyToModel="flyToModel" />
    </div>
    <div class="footer-btn">
      <div class="toOutdoor" @click="toOutdoor">
        <img src="../assets/vf_images/camera.png"/>
        <div class="label" style="margin-left: 1rem;">室外视频融合</div>
      </div>
      <div class="toResource" @click="toResource">
        <img src="../assets/vf_images/3D.png" />
        <div class="label" style="margin-left:-1rem;">场景编辑</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getScene,
    getConfig,
    getBaseLayerGroup,
    getEntities,
    getEntity
  } from '@/api/vf'

  import HandelBlock from './video-fusion/components/HandleBlock.vue'
  export default {
    name: 'Map',
    components: {
      HandelBlock
    },
    data() {
      return {
        visibleHome: true, // 显示
        visibleOpenFloor: true, // 显示
        visibleLookDown: false, // 显示
        visibleCloseFloor: false, // 显示
        visibleExit: false, // 隐藏
        isOpenFloors: false,
        floors: null,
        scene: null,
        ctx: '',
        isEnterFloor: false,
        dialog: {
          isShow: false
        },
        videoData: [],
        destroy: false
      }
    },
    created() {
      // console.log("创建")
    },
    mounted() {
      // console.log("加载")
      this.init()
    },
    beforeDestroy() {
      // console.log("销毁")
      if (globe) {
        // globe.destroy()
      }
    },
    methods: {
      init: async function() {
        const _this = this
        let isOk = false
        let scene
        await getScene({
          sceneId: '7752dcd41bb14f618e3d74cbcfa02ebb'
        }).then(rsp => {
          if (rsp.code === 200) {
            isOk = true
            scene = rsp.data
            _this.scene = scene
          }
        }).catch(() => {}).then(() => {})

        if (!isOk) {
          return
        }

        // scene.url=_this.ctx;
        createGlobe('cesiumContainer', scene)
        let floors
        globe.LEFT_CLICK_PRIMITIVE(function(e) {
          if (e.id === "31f4d41d-e03c-4a79-aec9-d45ee23d1ce8") {
            _this.getList()
          }
          if (e.attribute && e.attribute == 'Floor' && floors) {
            for (const floor of floors) {
              if (floor.id != e.id) {
                globe.showModel({
                  id: floor.id,
                  show: false
                })
              }
            }
            globe.flyToModel(e.id, function() {
              _this.isEnterFloor = true
              _this.visibleOpenFloor = false
              _this.visibleCloseFloor = false
              _this.visibleExit = true
              _this.dialog.isShow = true
            })
          }
        })
        globe.RIGHT_CLICK_PRIMITIVE(function(e) {
          if (_this.isEnterFloor) {
            _this.exitFloor()
          }
        })

        let configs
        await getConfig().then(rsp => {
          if (rsp.code === 200) {
            configs = rsp.data
            isOk = true
          }
        }).catch(() => {
          isOk = false
        }).then(() => {
          isOk = false
        })

        // _this.getList()
        const baseLayers = getBaseLayerGroup(configs)
        if (baseLayers != null && baseLayers.children && baseLayers.children.length > 0) {
          for (const menu of baseLayers.children) {
            if (menu && menu.layerId) {
              getEntities(menu.layerId).then(rsp => {
                if (rsp.code === 200) {
                  if (globe && rsp.data) {
                    globe.render(rsp.data)
                    floors = rsp.data.entities
                    _this.floors = floors
                  }
                }
              }).catch(() => {}).then(() => {})
            }
          }
        }
      },
      flyToHome() {
        /* 飞行到主视角 */
        const _this = this
        globe.flyToHome(_this.scene)
      },
      flyToVModelById: function(id) {
        /* 飞行到融合点位 */
        // console.log("行点击", id)
        globe.flyToVModelById(id)
      },
      flyToModel: function(id) {
        globe.flyToModel(id)
      },
      openFloors() {
        /* 楼层展开 */
        const _this = this
        if (!_this.isOpenFloors) {
          _this.isOpenFloors = true
          let index = 0
          let height = 0
          for (const floor of _this.floors) {
            if (floor.attribute == 'Floor') {
              if (index != 0) {
                height = 5 * index
                const z = floor.z * 1 + height
                globe.changeModelHeight(floor.id, z)
              }
              index++
            }
          }
          _this.visibleOpenFloor = false
          _this.visibleCloseFloor = true
          globe.zoomOut(2)
        }
      },
      closeFloors(param) {
        /* 楼层关闭 */
        const _this = this
        if (this.isOpenFloors && param !== "tableClick") {
          this.isOpenFloors = false
          let index = 0
          let height = 0
          for (const floor of _this.floors) {
            if (floor.attribute == 'Floor') {
              if (index != 0) {
                height = 5 * index
                const z = floor.z * 1 - height
                globe.changeModelHeight(floor.id, z)
              }
              index++
            }
          }
          globe.flyToHome(_this.scene)
          _this.visibleOpenFloor = true
          _this.visibleCloseFloor = false
        }
        if (this.isOpenFloors && param === "tableClick") {
          this.isOpenFloors = false
          let index = 0
          let height = 0
          for (const floor of _this.floors) {
            if (floor.attribute == 'Floor') {
              if (index != 0) {
                height = 5 * index
                const z = floor.z * 1 - height
                globe.changeModelHeight(floor.id, z)
              }
              index++
            }
          }
          // globe.flyToHome(_this.scene)
          _this.visibleOpenFloor = false
          _this.visibleCloseFloor = false
        }
      },
      exitFloor() {
        /* 在当前楼层返回上一级菜单 */
        const _this = this
        _this.videoData = []
        if (_this.isEnterFloor) {
          _this.isEnterFloor = false
          for (const floor of _this.floors) {
            globe.showModel({
              id: floor.id,
              show: true
            })
          }
          globe.flyToHome(_this.scene)
          if (this.isOpenFloors) {
            _this.visibleOpenFloor = false
            _this.visibleCloseFloor = true
            _this.visibleExit = false
          } else {
            _this.visibleOpenFloor = true
            _this.visibleCloseFloor = false
            _this.visibleExit = false
          }
        }
      },
      getList() {
        /* 获取点位视频列表 */
        getEntities('4b7d5dfec14e4449947c2198090c09e6').then(rsp => {
          if (rsp.code === 200) {
            this.videoData = rsp.data.entities
          }
        }).catch(() => {}).then(() => {})
      },
      show(id) {
        /* 显示融合点位 */
        const _this = this
        getEntity(id).then(rsp => {
          if (rsp.code === 200) {
            const model = rsp.data
            // console.log("输出",_this.ctx)
            globe.addVModel(model, _this.ctx)
            globe.flyToVModelById(model.id)
          }
        }).catch(() => {}).then(() => {})
      },
      hide(id) {
        /* 隐藏融合点位 */
        const _this = this
        getEntity(id).then(rsp => {
          if (rsp.code === 200) {
            const model = rsp.data
            globe.removeVModel(model, _this.ctx)
          }
        }).catch(() => {}).then(() => {})
      },
      toResource: function() {
        // this.destroy = true
        // globe.destroy()
        // setTimeout(() =>{
        //   this.$router.replace({
        //     path: '/resource'
        //   })
        // },2000)
        let routeData = this.$router.resolve({
          path: '/resource'
        })
        window.open(routeData.href, '_blank');
        // this.$router.replace({
        //   path: '/resource'
        // })
      },
      toOutdoor: function() {
        let routeData = this.$router.resolve({
          path: '/outdoor'
        })
        window.open(routeData.href, '_blank');
      }
    }
  }
</script>
<style lang="scss" scoped>
  .vf-block {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;

    #cesiumContainer {
      width: 100vw;
      height: 100vh;
      margin: 0;
      padding: 0;
    }

    .header {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 3.5rem;
      height: 7.5rem;
      color: rgba(255, 255, 255, 0.8);
      text-align: center;
      background-image: url(../assets/img/title.png);
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      top: 0;
      z-index: 9;
      width: 100%;

      .title {
        position: relative;
        top: 1rem
      }
    }

    .home_ui {
      pointer-events: none;
      position: absolute;
      z-index: 9;
      overflow: hidden;
      flex-direction: column;
      display: flex;
      top: 15rem;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .footer-btn {
      position: absolute;
      z-index: 9;
      overflow: hidden;
      top: 0;
      left: auto;
      right: 0;
      bottom: auto;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;

      .toResource,
      .toOutdoor {
        width: 12rem;
        height: 4rem;
        color: rgba(255, 255, 255, 0.8);
        font-weight: bold;
        font-size: 1.2rem;
        cursor: pointer;
        border-radius: 0.5rem;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

        &:hover {
          .label {
            color: #4788fb;
          }
        }

        >img {
          height: 2rem;
          width: 2rem;
          margin-left: 0rem;
        }

        .label {
          margin-right: 1rem;
        }
      }
    }
  }
</style>
